<template>
      <div class="icons">
          <swiper :options="swiperOption" class="swiper">
              <!-- slides -->
              <template v-for="(page,index) of pagesCut" >
                  <swiper-slide :key="index" class="swiper-slide">
                      <div class="icon-item" v-for="(item,index ) of page">
                          <div class="img">
                              <img :src="item.iconUrl" alt="">
                          </div>
                          <div class="keywords">
                              {{item.text}}
                          </div>
                      </div>
                  </swiper-slide>
              </template>
              <!-- Optional controls -->
              <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          
          
        
      </div>
</template>

<script>
  export default {
    name: 'Icons',
    data(){
      return {
        list: [
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1804/95/8d02011d149bdb02.png',text:'景点门票'},
  
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',text:'景点门票'},
          {iconUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',text:'景点门票'},





        ],
        swiperOption: {
          // 分页小圆点 : 分页的元素的class类名
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          loop: true, //   循环轮播
        },
      }
    },
    computed:{
      // icon图标分页的计算属性
      pagesCut(){
        // 逻辑：  将图标数组 按8个一组进行分组
        let data = [...this.list]
        let result = [];
        for(let i=0,len=data.length;i<len;i+=8){
          result.push(data.slice(i,i+8));
        }

        return result
      }
    },
    created(){
      let data = [...this.list]
      var result = [];
      for(var i=0,len=data.length;i<len;i+=8){
        result.push(data.slice(i,i+8));
      }

    }
  }
</script>

<style scoped lang="stylus">
.icons >>> .swiper-container{
    width:100%;
   // 高度为0，  padding-bottom为页面宽度的百分之五十, 用来占位 并且占位是响应式的根据视口宽度
    height:0;
    padding-bottom:55%;
    
    .icon-item {
        float: left;
        width:25%;
        height:1.5rem;
        text-align: center;
        padding-top: 0.2rem;
        .img {
            width:1.1rem;
            height:1.1rem;
            // 将块级元素变为行内块这样可以实现tac居中水平
            display: inline-block;
            text-align: center;
            box-sizing: border-box;
            img {
                width:1.1rem;
                height:1.1rem;
            }
        }
        .keywords {
            padding-top:0.2rem;
            overflow:hidden;
            white-space:nowrap;
            -ms-text-overflow: ellipsis
            text-overflow: ellipsis
        }
    }
    .swiper-pagination {
        padding-top: 20px;
    }
}
</style>